<template>
	<div class="routeContent">
		<div class="boxcontent">
			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="3000px" height="160px" style="position: absolute; x: 0;y: 0;float: left;">
				<path
					:d=oneD
					fill="none"
					stroke-width="2"
					stroke-dasharray="4 2"
					stroke="#ADADAD"
				/>
				<path
					:d=oneDSin
					fill="none"
					stroke-width="1"
					stroke="gray"
					style="fill: #ADADAD;"
				/>
			</svg>
			<div v-for="box in routesTable"
				:key="box.id"
				:name="box.name"
				class="blueBox"
				v-bind:class="{actived:box.id === selectedid}"
			>序号：{{(box.seq)}}
				<span class="centerName" @click='clickProcess(box)'>{{box.name}}</span>
				<i class="icon-reduce rightTop" v-if="routesTable.length !== 1 && !disabled" @click='reduceProcess(box)'></i>
				<i class="icon-plus rightBottom" v-if="routesTable.length !== 1 && !disabled" @click='addProcess(box)'></i>
				<i class="icon-plus rightMidOnly" v-if="routesTable.length === 1 && !disabled" @click='addProcess(box)'></i>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: 'routeInfo',
	props: {
		routesTable: {
			type: Array,
			default: () => {
				return []
			}
		},
		disabled: Boolean
	},
	data () {
		return {
			oneD: ' ',
			oneDSin: ' ',
			width: 0,
			height: 0,
			startPositionList: ['left', 'right', 'top', 'bottom'],
			lineWidth: 60,
			lineHeight: 100,
			selectedid: '',
			// routesTable: [],
			newBox: { id: 'temp', name: '', code: '', parentId: '', subId: '', level: 0, active: '1' }
		}
	},
	methods: {
		addProcess (currentBox) {
			this.$emit('add-route', currentBox)
		},
		reduceProcess (currentBox) {
			this.$emit('reduceProcess', currentBox)
		},
		clickProcess (currentBox) {
			this.$emit('clickProcess', currentBox)
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl';
.blueBox{
	x:100px;
	y:100px;
	width:180px;
	height:100px;
	border:1px solid #808080;
	position:relative;
	float: left;
	margin: 30px;
	display: inline-block;
	border-radius: 4px;
}
.rightTop{
	position: relative;
    float: right;
    right: -12px;
    top: -12px;
}
.rightBottom{
	position: relative;
    float: right;
    right: -36px;
    top: 100%;
    margin-top: -12px;
}
.rightMidOnly{
    position: relative;
    float: right;
    right: -12px;
    top: 50%;
    margin-top: -12px;
}
.icon-plus{
	background: url('~images/icon/artrouter/plus1.png') no-repeat;
	width: 24px;
	height: 24px;
	background-size:100%;
}
.icon-reduce{
	background: url('~images/icon/artrouter/reduce1.png') no-repeat;
	width: 24px;
	height: 24px;
	background-size:100%;
}
.el-icon-circle-plus{
	position: relative;
	y: 50%;
}
.el-icon-remove{
	position: relative;
	y: 0;
}
.centerName{
	position: absolute;
	text-align: center;
	width: 180px;
	height: 100px;
	left: 0px;
	line-height: 100px;
	font-size: 18px;
	font-weight: bold;
}
.actived{
	border: 2px solid #318cf2;
	color: #318cf2;
	/*box-shadow: 0px 0px 7px #13ce66;*/
}
.boxcontent{
	position: absolute;
	width: 3000px;
}
.routeContent{
	overflow: overlay;
	position: relative;
    width: 900px;
    height: 180px;
}
</style>
